import React, { useEffect, useState, useRef } from 'react';
import './css/order.scss'
import IconFont from './Tubiao';
import { useNavigate } from 'react-router-dom';
import { Sticky, Cell, Card, ProductCard, Dialog } from 'react-vant';
import { CountDown } from '@nutui/nutui-react'
import { InfiniteScroll } from 'antd-mobile'
import axios from './Axios'
export default function Order() {
    const navigate = useNavigate()
    const stateRef = useRef({
        remainingTime: 60 * 15000,
    })
    const [orderlist, setorderlist] = useState([])
    const getorder = async () => {
        let { data } = await axios.get('/getorder')
        console.log(data.orderlist);
        setorderlist(data.orderlist)

    }
    useEffect(() => {
        getorder()
    }, [])


    const quxiao = async (_id) => {
        let obj = { _id }
        let { data } = await axios.post('/orderquxiao', obj)
        if (data.code == 200) {
            getorder()
        }
    }

    const shan = async (_id) => {
        let obj = { _id }
        let { data } = await axios.post('/ordershan', obj)
        if (data.code == 200) {
            getorder()
        }
    }
    const queren = async (_id) => {
        let obj = { _id }
        let { data } = await axios.post('/orderqueren', obj)
        if (data.code == 200) {
            getorder()
        }
    }
    const tiao = ["onClick={() => (navigate('/begin', { state: item }))}"]
    return (
        <div className='orderdiv'>
            <Sticky>
                <div className='top'>
                    <span className='icon' onClick={() => (navigate('/app/my'))}>
                        <IconFont name='icon-arrowLeft'></IconFont>
                    </span>
                    <span>订单列表</span>
                </div>
            </Sticky>
            <div className='order'>
                {
                    orderlist.map((item) => {
                        return (
                            <Card className='card' key={item._id} >
                                <div className={item.status == 4 ? 'hui' : 'dno'} onClick={() => (navigate('/begin', { state: item }))}>
                                    <span style={{ color: '#666666' }}>
                                        订单编号：{item._id}
                                    </span>
                                    <span>
                                        {item.status == 1 && '待付款'}
                                        {item.status == 2 && '待收货'}
                                        {item.status == 3 && '待取票'}
                                        {item.status == 4 && '交易关闭'}
                                        {item.status == 5 && '交易完成'}
                                    </span>
                                </div>
                                <div className='content'>
                                    <ProductCard
                                        desc={'薛之谦，天外来物演唱会'}
                                        title={'《天外来物》演唱会'}
                                        thumb={'.././1.png'}
                                        price={'399'}
                                    />

                                </div>
                                <div className='anniu'>
                                    {item.status == 1 && <p>
                                        <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }} onClick={() =>
                                            Dialog.confirm({
                                                message: '确认要取消吗?',
                                                closeable: true,
                                                onCancel: () => console.log('cancel'),
                                                onConfirm: () => (quxiao(item._id))
                                            })
                                        }>取消订单</span>
                                        <span style={{ border: '1px solid', padding: '3px', color: '#FF6262', borderRadius: '5px' }}>
                                            去支付
                                            <CountDown style={{ display: 'inline-block' }} remainingTime={stateRef.current.remainingTime} />
                                        </span>
                                    </p>}
                                    {item.status == 2 && <p>
                                        <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }}
                                            onClick={() => (navigate('/wuliu', { state: { item: item } }))}
                                        >查看物流</span>
                                       <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }} onClick={() =>
                                            Dialog.confirm({
                                                message: '确认要收货吗?',
                                                closeable: true,
                                                onCancel: () => console.log('cancel'),
                                                onConfirm: () => (queren(item._id))
                                            })
                                        }>确认收货</span>
                                    </p>}
                                    {item.status == 3 && <p>
                                        <span style={{ border: '1px solid', padding: '3px', color: '#FF6262', borderRadius: '5px' }}>
                                            二维码
                                        </span>
                                    </p>}
                                    {item.status == 4 && <p>
                                        <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }} onClick={() =>
                                            Dialog.confirm({
                                                message: '确认要删除吗?',
                                                closeable: true,
                                                onCancel: () => console.log('cancel'),
                                                onConfirm: () => (shan(item._id))
                                            })
                                        }>删除订单</span>
                                    </p>}
                                    {item.status == 5 && <p>
                                        <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }}
                                            onClick={() => (navigate('/wuliu', { state: { item: item } }))}
                                        >查看物流</span>
                                        <span style={{ border: '1px solid', padding: '3px', color: '#FF6262', borderRadius: '5px' }}>
                                            去评价
                                        </span>
                                    </p>}
                                </div>
                            </Card>
                        )

                    })
                }
                <InfiniteScroll />
                {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
                {/* <Card className='card'>
                    <div className='dno'>
                        <span style={{ color: '#666666' }}>
                            订单编号：12164651561854
                        </span>
                        <span>
                            待付款
                        </span>
                    </div>
                    <div className='content'>
                        <ProductCard
                            desc="上海市1862时尚艺术中心"
                            title="舞台剧东野圭吾【虚无的十字架】"
                            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                        />
                        <CountDown style={{ display: 'inline' }} remainingTime={stateRef.current.remainingTime} />
                    </div>
                    <div className='anniu'>
                        <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }} onClick={() =>
                            Dialog.confirm({
                                message: '确认要取消吗?',
                                onCancel: () => console.log('cancel'),
                                onConfirm: () => console.log('confirm')
                            })
                        }>取消订单</span>
                        <span style={{ border: '1px solid', padding: '3px', color: '#FF6262', borderRadius: '5px' }}>去支付  </span>

                    </div>
                </Card>
                <Card className='card'>
                    <div className='dno'>
                        <span style={{ color: '#666666' }}>
                            订单编号：12164651561854
                        </span>
                        <span>
                            待收货
                        </span>
                    </div>
                    <div className='content'>
                        <ProductCard
                            desc="上海市1862时尚艺术中心"
                            title="舞台剧东野圭吾【虚无的十字架】"
                            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                        />
                    </div>
                    <div className='anniu'>
                        c
                        <span style={{ border: '1px solid', padding: '3px', color: '#FF6262', borderRadius: '5px' }}>确认收货</span>
                    </div>
                </Card> */}
            </div>
        </div>
    )
}
